/* 获取元素 */
const canvas = document.getElementById("canvas");
const increaseBtn = document.getElementById("increase");
const decreaseBtn = document.getElementById("decrease");
const sizeEL = document.getElementById("size");
const colorEl = document.getElementById("color");
const clearEl = document.getElementById("clear");

const ctx = canvas.getContext("2d");
/* 初始化默认值 */
let size = 10;
let isPressed = false;
colorEl.value = "black";
let color = colorEl.value;

let x;
let y;
/* 在元素上按下任意鼠标按钮。事件 */
canvas.addEventListener("mousedown", (e) => {
  isPressed = true;

  x = e.offsetX;
  y = e.offsetY;
});
/* 在元素上释放任意鼠标按键。事件 */
document.addEventListener("mouseup", (e) => {
  isPressed = false;

  x = undefined;
  y = undefined;
});
/* 指针在元素内移动时持续触发。 */
canvas.addEventListener("mousemove", (e) => {
  if (isPressed) {
    const x2 = e.offsetX;
    const y2 = e.offsetY;
    /* 终点 */
    drawCircle(x2, y2);
    /* 开始画 */
    drawLine(x, y, x2, y2);
    /* 把终点赋值给起点 */
    x = x2;
    y = y2;
  }
});
function drawCircle(x, y) {
  /* 创建一个新的路径 */
  ctx.beginPath();
  /* x的点和y的点 线条的粗细 半径*2 */
  ctx.arc(x, y, size, 0, Math.PI * 2);
  /* 描述颜色和样式的属性 */
  ctx.fillStyle = color;
  /* 据当前的填充样式，填充当前或已存在的路径的方法 */
  ctx.fill();
}

function drawLine(x1, y1, x2, y2) {
  /* 创建一个新的路径 */
  ctx.beginPath();
  /* 将一个新的子路径的起始点移动到 (x，y) 坐标的方法 */
  ctx.moveTo(x1, y1);
  /* 使用直线连接子路径的终点到 x，y 坐标的方法（并不会真正地绘制）。 */
  ctx.lineTo(x2, y2);
  /* 描述颜色和样式的属性 */
  ctx.strokeStyle = color;
  // 设置线段厚度的属性（即线段的宽度）。
  ctx.lineWidth = size * 2;
  /* 根据当前的画线样式，绘制当前或已经存在的路径的方法。 */
  ctx.stroke();
}
function updateSizeOnScreen() {
  /* 更改sizeEL元素内容 */
  sizeEL.innerText = size;
}
/* +的点击事件 */
increaseBtn.addEventListener("click", () => {
  /* 点击一次+5 */
  size += 5;
  /* 最大值为50 */
  if (size > 50) {
    size = 50;
  }

  updateSizeOnScreen();
});
/* -的点击事件 */
decreaseBtn.addEventListener("click", () => {
  /* 点击一次-5 */
  size -= 5;
  /* 最小值为5 */
  if (size < 5) {
    size = 5;
  }
  updateSizeOnScreen();
});
/* input更改事件 */
colorEl.addEventListener("change", (e) => (color = e.target.value));

/* x的点击事件 */
clearEl.addEventListener("click", () => {
  /* 这个方法通过把像素设置为透明以达到擦除一个矩形区域的目的。 */
  return ctx.clearRect(0, 0, canvas.width, canvas.height);
});
